<template>
	<!-- 下单购买页面 -->
	<view>
		<MyNavbar title="下单" />
		
		<div v-if="ticketData">
			<u-cell style="background-color: #FFFFFF;" title="小栗旬理发店">
				<div slot="label" style="margin-top: 24rpx;">
					<div class="flex">
						<div>
							<u-image width="200rpx" height="200rpx" :src="ticketData.poster" />
						</div>
						<div style="margin-left: 12rpx;">
							<div>{{ticketData.title}}</div>
							<div style="color: red;"><span>￥</span>{{ticketData.price}}</div>
						</div>
					</div>
				</div>
			</u-cell>
			
			<div class="base-box">
				<u-cell title="城市" :value="ticketData.city">
				</u-cell>
				<u-cell title="详细地址" :value="ticketData.address">
				</u-cell>
				<u-cell title="入场时间" >
					<span slot="value">{{ticketData.beginTime}} 至 {{ticketData.endTime}}</span>
				</u-cell>
			</div>
			
			
			<!-- 场次 先不用 -->
			<u-cell v-if="false" style="background-color: #FFFFFF;margin-top: 24rpx;" title="场次">
				<div slot="label">
					<u-radio-group 
						v-model="activeSpec"
					    placement="column"
					>
						<u-radio 
							v-for="item in ticketData.mulSpec"
							:customStyle="{marginBottom: '8px'}"
							activeColor="red" 
							:name="item.uid"
							:label="item.specName"
						>
						</u-radio>
					</u-radio-group>
				</div>
			</u-cell>
		</div>
		
		<!-- 订单附加表单信息 -->
		<div class="base-box">
			<u-cell title="订单备注">
				<div slot="label">
					<u-textarea v-model="remark" clearable placeholder="订单备注"/>
				</div>
			</u-cell>
		</div>
		
		
		<u-tabbar
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<div style="width: 100%;height: 100%;" class="flex flex-center">
				<div class="flex" style="padding: 0 24rpx;">
					合计：<div style="color: red;"><span>￥</span>{{totalPrice}}</div>
				</div>
				<div style="width: 0; flex:1;padding-right: 24rpx;" class="flex">
					<u-button 
						:loading="loading" type="primary" text="提交订单" 
						@click="onClickSubmit()">
					</u-button>
				</div>
			</div>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// loading效果
				loading: false,
				// 门票数据
				ticketData: null,
				// 总计金额
				totalPrice: 0,
				// 订单备注
				remark: '',
				
				// 暂时不用
				activeSpec: [],
			}
		},
		onLoad(option){
			// 路由参数中的门票数据
			let ticketDataStr = option.ticketData;
			if (!ticketDataStr) {
				this.$utils.showToast('门票数据不存在，请返回重试');
				return;
			}
			let ticketData = JSON.parse(ticketDataStr);
			this.ticketData = ticketData;
			this.totalPrice = ticketData.price
		},
		methods: {
			// 提交订单
			onClickSubmit(){
				let {ticketData, remark} = this;
				let data = {
					goodsUid: ticketData.uid,
					remark: remark
				};
				this.loading = true;
				this.$api.app.order.create(data).then(({data})=>{
					this.loading = false;
					this.$utils.showSuccess("下单成功");
					uni.redirectTo({
						url: '/pages/yuYue/orderDetail/orderDetail?uid=' + data.uid
					});
				}).catch(e=>{
					this.loading = false;
				});
			},
		}
	}
</script>

<style>

</style>
